<template>
    <div class="detail" v-if="detailTxt.length !== 0">
        <i class="iconfont icon-fanhui" @click="forback()" id="ii"></i>
        <div class="detail_t">
            <div class="bg" :style="{backgroundImage:'url('+ detailTxt.coverImgUrl +')'}"></div>
            <div class="detail_img">
                <img :src="detailTxt.coverImgUrl" alt="">
            </div>
            <div class="detail_txt" v-if="comment.length !== 0">
                <p>{{detailTxt.name}}</p>
                <div class="first">
                    <img :src="comment.hotComments[0].user.avatarUrl" alt="">
                    <p>{{comment.hotComments[0].user.nickname}}</p> 
                </div>
            </div>
        </div>
        <div class="detailTag" v-if="detailTxt.length !== 0">
            <span>标签:</span>
            <span class="span"  v-for="(item,index) in detailTxt.tags" :key="index">{{item}}</span>
            <div class="txt showOrHidden">
                简介：{{detailTxt.description}}
            </div>
            <div class="isShow" @click="isShow">点开全文</div>
        </div>
        <div class="btn">
            <router-link class="toBtn" :to='{path:"/detail/songList",query:{id:songid}}'>歌曲列表</router-link>
            <router-link class="toBtn" :to='{path:"/detail/hotComment",query:{id:songid}}'>热门评论</router-link>
            <router-link class="toBtn" :to='{path:"/detail/comments",query:{id:songid}}'>精彩评论</router-link>
        </div>
        <router-view></router-view>
    </div>
    
       
</template>
<script>
import axios from "axios";
export default {
    data:function(){
        return{
            songid:"",
            detailTxt:[],
            comment:[],
            //简介：点开全文或收起
            show:false
        }
    },
    created:function(){
        this.songid = this.$route.query.id;
    },
    mounted:function(){
        var that = this;
        axios.get("http://netease.bluej.cn/playlist/detail?timestamp=1503",{
            params:{
                id:this.songid
            }
        }).then(function(res){
            that.detailTxt = res.data.playlist;

        })
        axios.get("http://netease.bluej.cn/comment/playlist?timestamp=1503",{
            params:{
                id:this.songid
            }
        }).then(function(res){
            that.comment = res.data;
        })
    },
    methods:{
        forback:function(){
             this.$parent.$router.go(-1);
        },
        isShow:function(){
            var txt = document.getElementsByClassName("txt")[0];
            var isShow = document.getElementsByClassName("isShow")[0];
            this.show = !this.show;
            if(this.show){
                txt.classList.remove("showOrHidden");
                isShow.innerHTML = "收起全文";
            }else{
                txt.classList.add("showOrHidden");
                isShow.innerHTML = "点开全文";
            }
        }
    }
}
</script>
<style scoped lang="scss">
    .clearfix:after{
        content:"";
        display:block;
        clear:both;
    }
    .active{
        background:orchid;
    }
    .showOrHidden{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
    .detail{
        width:100vw;
        position:relative;
        #ii{
            position:absolute;
            top:5px;
            left:10px;
            z-index:99;
            font-size:30px;
            color:#000;
        }
        .detail_t{
            width:100vw;
            height:30vh;
            position: relative;
            .bg{
                width:100vw;
                height:30vh;
                filter: blur(2px);
                position: absolute;
                top:0;
                left:0;
                z-index:1;
            }
            .detail_img{
                width:30vw;
                height:30vw;
                position: absolute;
                left:5vw;
                top:10vw;
                z-index:2;
                img{
                    width:100%;
                    height:100%;
                    border-radius: 5px;
                }
            }
            .detail_txt{
                width:60vw;
                position: absolute;
                right:0;
                top:5vh;
                z-index:2;
                p{
                    color:#fff;
                    font-size:16px;
                }
                .first{
                    width:100%;
                    margin:10vw 0 0 0;
                    img{
                        width:10vw;
                        height:10vw;
                        border-radius: 50%;
                        float:left;
                    }
                    p{
                        float:left;
                        line-height:10vw;
                        color:#f1f1f1;
                        font-size: 14px;
                    }
                }
            }
            
        }
        .detailTag{
            width:100vw;
            overflow: hidden;
            margin-bottom:3vh;
            padding-bottom:2vh;
            
            span{
                display:inline-block;
                padding: 4vw;
            }
            .span{
                font-size:14px;
                color:#666;
            }
            .txt{
                padding:0 3vw;
                font-size:14px;
                line-height:30px;
                background:#f6f6f6;
            }
            .isShow{
                padding:0 3vw;
                font-size:14px;
                line-height:30px;
                color:purple;
            }
        }
        .btn{
            width:100vw;
             .toBtn{
                display:inline-block;
                width:33vw;
                text-align:center;
                text-decoration: none;
                color:#666;
                background:#fcfcfd;
                line-height: 8vh;
                &:hover{
                    border-bottom:2px solid purple;
                }
            }
        }
       
     
    }
</style>